<template>
  <div>
    <el-dialog title="修改设备" :visible.sync="dialogFormVisible" width="650px" @close="$emit('closeGuanLi')">
      <el-form ref="dataForm" :model="formBase">
        <el-form-item label="机器编号:">
          <span>{{ formBase.innerCode }}</span>
        </el-form-item>
        <el-form-item label="供货时间:">
          <span>{{ formBase.time }}</span>
        </el-form-item>
        <el-form-item label="设备类型:">
          <span>{{ formBase.type }}</span>
        </el-form-item>
        <el-form-item label="设备容量:">
          <span>{{ formBase.capacity }}</span>
        </el-form-item>
        <el-form-item label="设备点位:">
          <el-select v-model="formBase.nodeId">
            <el-option
              v-for="item in options"
              :key="item.model"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="合作商:">
          <span>{{ formBase.ownerName }}</span>
        </el-form-item>
        <el-form-item label="所属区域:">
          <span>{{ formBase.area }}</span>
        </el-form-item>
        <el-form-item label="设备地址:">
          <span>{{ formBase.address }}</span>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="$emit('closeGuanLi')">取 消</el-button>
        <el-button
          class="true"
          type="primary"
          @click="updataManagementList"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updataManagement, getNodeList } from '@/api/equipment'
export default {
  name: 'ManagementAdd',
  filters: {},
  props: {
    formBase: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      options: [],
      value: ''
    }
  },
  computed: {},
  watch: {},
  mounted() {},
  created() {
    this.getNodeInfo()
  },
  methods: {
    // 弹层显示
    dialogFormV() {
      console.log(this.formBase)
      this.value = this.formBase.nodeId
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH() {
      this.dialogFormVisible = false
    },
    async updataManagementList() {
      const obj = {
        id: this.formBase.id,
        nodeId: this.formBase.nodeId
      }
      try {
        await updataManagement(obj)
        this.dialogFormH()
        this.$message.success('修改成功!')
        this.$emit('initTable')
      } catch (error) {
        this.$message.warning('设备正在运营')
        this.dialogFormH()
      }
    },
    async getNodeInfo() {
      const data = await getNodeList()
      this.options = data.currentPageRecords
      console.log(this.options)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog{
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
}
.dialog-footer{
    text-align: center;
    margin-bottom: 20px;
    .el-button{
        margin-right: 20px;
        height: 40px;
        width: 90px;
        line-height: 10px;
    }
    .cancel{
        background-color: #fbf4f0;
         border: #fbf4f0;
         color: #655b56;
    }
    .cancel:hover{
        background-color: #f3e7e1;
    }
    .true{
         background-color: #ff722c;
         border: #ff722c;
    }
    .true:hover{
        background-color: #e74d17;
    }
}
.el-input,.el-input-number{
    width: 400px;
}
::v-deep .el-form{
    margin-left: 10%;
    font-weight: normal;
}
.el-select{
    width: 400px;
}
</style>
